<template>
  <view class="container">
    <!-- 导航栏下拉选择 -->
    <view class="nav-bar">
      <view class="nav-selector">
        <picker 
          mode="selector" 
          :range="categoryOptions" 
          range-key="text"
          @change="handleCategoryChange"
        >
          <view class="picker">
            {{formData.itemCategory || '选择类别'}}
          </view>
        </picker>
      </view>
      
      <view class="nav-selector">
        <picker 
          mode="selector" 
          :range="cabinetOptions" 
          range-key="text"
          @change="handleCabinetChange"
        >
          <view class="picker">
            {{formData.cabinetNumber || '选择柜号'}}
          </view>
        </picker>
      </view>
      
      <view class="nav-selector">
        <picker 
          mode="selector" 
          :range="layerOptions" 
          range-key="text"
          @change="handleLayerChange"
        >
          <view class="picker">
            {{formData.layerNumber || '选择层号'}}
          </view>
        </picker>
      </view>
    </view>

    <!-- 物品列表 -->
    <scroll-view 
      scroll-y
      @scrolltolower="loadMore"
      :style="{height: scrollHeight + 'px'}"
    >
      <view class="item-list">
        <view class="list-header">
          <text class="header-item">物品名称</text>
          <text class="header-item">类别</text>
          <text class="header-item">存放位置</text>
          <text class="header-item">操作</text>
        </view>
        
        <view class="list-content">
          <view v-for="item in itemList" :key="item.itemId" class="list-item">
            <text class="item-cell">{{item.itemName}}</text>
            <text class="item-cell">{{item.itemCategory}}</text>
            <text class="item-cell">{{item.storageLocation}}</text>
            <view class="item-cell">
              <button class="borrow-btn" size="mini" type="primary" @click.stop="goBorrow(item)">借用</button>
            </view>
          </view>
        </view>
        
        <uni-load-more :status="loadingStatus" v-if="loadingStatus !== 'more'"></uni-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        status: "0",
        itemName: "",
        itemCategory: "",
        cabinetNumber: "",
        layerNumber: "",
        pageNum: 1,
        pageSize: 10
      },
      itemList: [],
      total: 0,
      loadingStatus: 'more',
      scrollHeight: 0,
      
      // 下拉选择选项
      categoryOptions: [
        {value: "", text: "全部类别"},
        {value: "电子设备", text: "电子设备"},
        {value: "检测设备", text: "检测设备"},
        {value: "安全工具", text: "安全工具"},
        {value: "防护用具", text: "防护用具"}
      ],
      
      cabinetOptions: [
        {value: "", text: "全部柜号"},
        {value: "1", text: "1号柜"},
        {value: "2", text: "2号柜"},
        {value: "3", text: "3号柜"}
      ],
      
      layerOptions: [
        {value: "", text: "全部层号"},
        {value: "1", text: "1层"},
        {value: "2", text: "2层"},
        {value: "3", text: "3层"}
      ]
    }
  },
  onLoad() {
    this.calculateScrollHeight()
    this.getItems()
  },
  methods: {
    // 计算滚动区域高度
    calculateScrollHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.scrollHeight = systemInfo.windowHeight - 50 // 减去导航栏高度
    },
    
    // 获取物品列表
    async getItems() {
      this.loadingStatus = 'loading'
      try {
        const res = await uni.request({
          url: this.$baseUrl + '/item/getAllItems',
          method: 'POST',
          data: this.formData,
          header: {
            'Content-Type': 'application/json'
          }
        })
        
        const response = res[1] || res
        
        if (response.statusCode === 200 && response.data.code === 200) {
          if (this.formData.pageNum === 1) {
            this.itemList = response.data.data.list || []
          } else {
            this.itemList = [...this.itemList, ...(response.data.data.list || [])]
          }
          
          this.total = response.data.data.total || 0
          this.loadingStatus = this.itemList.length >= this.total ? 'noMore' : 'more'
        } else {
          uni.showToast({
            title: response.data?.message || '请求失败',
            icon: 'none'
          })
          this.loadingStatus = 'more'
        }
      } catch (e) {
        console.error('请求出错:', e)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
        this.loadingStatus = 'more'
      }
    },
    
    // 类别变化处理
    handleCategoryChange(e) {
      const index = e.detail.value
      this.formData.itemCategory = this.categoryOptions[index].value
      this.resetSearch()
    },
    
    // 柜号变化处理
    handleCabinetChange(e) {
      const index = e.detail.value
      this.formData.cabinetNumber = this.cabinetOptions[index].value
      this.formData.layerNumber = ""
      this.resetSearch()
    },
    
    // 层号变化处理
    handleLayerChange(e) {
      const index = e.detail.value
      this.formData.layerNumber = this.layerOptions[index].value
      this.resetSearch()
    },
    
    // 重置搜索
    resetSearch() {
      this.formData.pageNum = 1
      this.getItems()
    },
    
    // 加载更多
    loadMore() {
      if (this.loadingStatus === 'noMore') return
      this.formData.pageNum++
      this.getItems()
    },
    
    // 跳转到借用页面
    goBorrow(item) {
      uni.navigateTo({
        url: `/pages/items/BorrowItem?item=${encodeURIComponent(JSON.stringify(item))}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .nav-bar {
    display: flex;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    position: sticky;
    top: 0;
    z-index: 10;
    
    .nav-selector {
      flex: 1;
      margin: 0 10rpx;
      
      .picker {
        padding: 15rpx;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        text-align: center;
        font-size: 28rpx;
      }
    }
  }
  
  .item-list {
    background-color: #fff;
    border-radius: 12rpx;
    margin: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    
    .list-header {
      display: flex;
      padding: 24rpx 20rpx;
      background-color: #f8f8f8;
      border-bottom: 2rpx solid #eee;
      
      .header-item {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #666;
        font-weight: 500;

        &:last-child {
          flex: 0.5;
        }
      }
    }
    
    .list-content {
      .list-item {
        display: flex;
        padding: 24rpx 20rpx;
        border-bottom: 1rpx solid #eee;
        align-items: center;
        
        &:last-child {
          border-bottom: none;
        }
        
        .item-cell {
          flex: 1;
          text-align: center;
          font-size: 26rpx;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 10rpx;
          
          &:first-child {
            color: #007AFF;
          }

          &:last-child {
            flex: 0.5;
          }

          .borrow-btn {
            font-size: 24rpx;
            margin: 0;
            padding: 0 20rpx;
          }
        }
      }
    }
  }
}
</style>